<template>
	<view class="cu-card ">
		<view class="cu-item contenBox">
			<view class="input-row border contenBox-item ">
				<text class="text-gray leftCol start-mark">车牌号：</text>
				<picker @change="bindPickerChange" class="cuspicker" style="position: relative;" range-key="LicensePlateNO" :value="index.truck"
				 :range="truckList" data-type="truck">
					<view class="picker cuspicker_item " >
						{{truckList[index.truck].LicensePlateNO ||"" }}
					</view>
				</picker>
			</view>
			<text class="cuIcon-right text-blue" style="position: relative;left: 305px;top: -35px;"></text>
			<view class="input-row border contenBox-item ">
				<text class="text-gray leftCol start-mark">姓名：</text>
				<input class="contenBox-border " v-model="formInfo.DriverName" type="text" value="" />
			</view>
			<view class="input-row border contenBox-item ">
				<text class="text-gray leftCol start-mark">手机号：</text>
				<input class="contenBox-border " v-model="formInfo.Phone" type="text" value="" />
			</view>
			<view class="input-row border contenBox-item"  >
				<text class="text-gray leftCol start-mark">申请放行：</text>
				<picker @change="bindPickerChange" class="cuspicker " style="position: relative;" range-key="DataValue" :value="index.through"
				 :range="throughList" data-type="through">
					<view class="picker cuspicker_item">
						{{throughList[index.through].DataValue||''}}
					</view>
				</picker>
			</view>
			<text class="cuIcon-right text-blue" style="position: relative;left: 305px;top: -35px;"></text>
			<view class="input-row border contenBox-item"  > 
				<text class="text-gray leftCol start-mark">退出标记：</text>
				<picker @change="bindPickerChange"  class="cuspicker  " style="position: relative;" range-key="DataValue" :value="index.inOut"
				 :range="inOutList" data-type="inOut">
					<view class="picker cuspicker_item">
						{{inOutList[index.inOut].DataValue||''}}
					</view>
				</picker>
			</view>
			<text class="cuIcon-right text-blue" style="position: relative;left: 305px;top: -35px;"></text>
			<view class=" input-row border contenBox-item "  >
				<text class="text-gray leftCol start-mark">申请原因：</text>
				<picker @change="bindPickerChange" class="cuspicker  " style="position: relative;" range-key="DataValue" :value="index.reason"
				 :range="reasonList" data-type="reason">
					<view class="picker cuspicker_item">
						{{reasonList[index.reason].DataValue||''}}
					</view>
				</picker>

			</view>
			<text class="cuIcon-right text-blue" style="position: relative;left: 305px;top: -35px;"></text>
		</view>
		<view class="padding">
			<button 
			class="cu-btn block bg-green margin-tb-sm lg"  
			style="box-shadow: 0 3px 2px #90A19A;" 
			:disabled="status&&status!=='0'" 
			@click="confirm">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				session: {},
				truckList: [],
				index: {
					truck: 0,
					through: 0,
					inOut: 0,
					reason: 0,
				},
				throughList: [],
				inOutList: [],
				reasonList: [{DataCode:'',DataValue:""}],
				formInfo: {
					DriverName: '',
					Phone: '',
					LicensePlateNO: '',
					InOutFlag: '',
					WarehouseNo: '',
					InOutFlag: '',
					Marking: '',
				},
				truckNo: '',
				status: '',
			}
		},
		onLoad(e) {
			const session = uni.getStorageSync('session');
			this.session = session;
			console.log('eeeee',e)
			this.status = e.status
			this.truckNo = e.no

			this.$store.dispatch('uni/UserInfo', {
				openid: session.openid
			}).then(res => {
				this.formInfo.DriverName = res.Data.RealName
				this.formInfo.Phone = res.Data.Phone
			})
			this.getTruckInfo()
			this.getDefaultInfo(8)
			this.getDefaultInfo(9)
			this.getDefaultInfo(10)
			if(this.truckNo){
				setTimeout(()=>{this.getDetailInfo()},800)
			}
		},
		created() {

		},
		methods: {
			alertPicker(e){
				const {
					type
				} = e.currentTarget.dataset;
				// this.bindPickerChange(e)
				console.log('e.detail.value',e.detail.value)
			},
			getDetailInfo() {
				this.$store.dispatch('uni/GetVehicleInformationByVehicleNO', {
					openid: this.session.openid,
					vehicleNO: this.truckNo
				}).then(res => {
					// console.log('getDetailInfo', res)
					this.formInfo = res.Data
					const {
						LicensePlateNO,
						InOutFlag,
						WarehouseNo,
						Marking
					} = res.Data
					
					this.initPicker(LicensePlateNO, 'truckList', "LicensePlateNO", "truck")
					this.initPicker(InOutFlag, 'inOutList', "DataCode", "inOut")
					this.initPicker(WarehouseNo, 'throughList', "DataCode", "through")
					this.initPicker(Marking, 'reasonList', "DataCode", "reason")
				})
			},
			confirm() {
				if (!this.formInfo.Phone || !this.formInfo.DriverName) {
					uni.showToast({
						title: '请填写个人信息',
						icon: 'none'
					})
					return;
				}
				if (this.formInfo.Phone) {
					if (!(/^1[3456789]\d{9}$/.test(this.formInfo.Phone))) {
						uni.showToast({
							title: '请填写正确的手机号码',
							icon: 'none'
						})
						return;
					}
				}
				this.setFormSelect()
				const params = {
					...this.formInfo,
					OpenID: this.session.openid
				}
				let url=this.truckNo?"ModifyVehicleInformation":"AddVehicleInformation"
				this.$store.dispatch(`uni/${url}`, params).then(res => {
					if (res.Code === 0) {
						uni.showToast({
							title: res.Message,
							duration: 1500,
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}
				})
			},
			setFormSelect() {
				this.formInfo.LicensePlateNO=this.truckList[this.index.truck].LicensePlateNO
				this.formInfo.WarehouseNo = this.throughList[this.index.through].DataCode
				this.formInfo.InOutFlag = this.inOutList[this.index.inOut].DataCode
				this.formInfo.Marking = this.reasonList[this.index.reason].DataCode
			},
			//下拉框匹配方法
			initPicker(initData = "", list = [], code = "code", indexField = "") {
				//initData detail请求返回的初始匹配数据
				//list 下拉框数组
				//code 返回的数据 对应数组中对象的属性  如：DataCode
				//indexField 多个数组使用 对象index定义的话，对应index对象中的 属性
				if (!this[list]) {
					return;
				}
				this[list].forEach((v, index) => {
					if (v[code] == initData) {
						this.index[indexField] = index
					}
				})
				const noListData=this[list].findIndex(v=>v[code] == initData)
				if(noListData===-1){
					this.index[indexField] = 0
				}
			},
			getTruckInfo() {
				uni.showLoading({
					title: '加载中'
				});
				this.$store.dispatch('uni/GetTruckList', {
					openid: this.session.openid
				}).then(res => {
					this.truckList = res.Data || [];
					this.formInfo.LicensePlateNO = this.truckList[this.index.truck].LicensePlateNO
					if (res.Data.length === 0) {
						uni.showToast({
							title: '暂无车辆数据',
							duration: 2000
						});
					}
					uni.hideLoading()
				}).catch(() => uni.hideLoading());
			},
			getDefaultInfo(index) {
				this.$store.dispatch('uni/Config', {
					dataType: index
				}).then(res => {
					switch (index) {
						case 8:
							this.throughList = res;
							break;
						case 9:
							this.inOutList = res;
							break;
						case 10:
							this.reasonList = res
							break;
						case 11:
							this.reasonList = res
							break;
					}
				})
			},
			bindPickerChange(e) {
				console.log('bindPickerChange???')
				const {
					type
				} = e.currentTarget.dataset;
				
				let _index = e.detail.value
				this.index[type] = e.detail.value;
				console.log('index', _index)
				switch (type) {
					case 'inOut':
						let dataType = _index == 0 ? 10 : 11
						console.log('dataType--',dataType)
						this.getDefaultInfo(dataType)
						break;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.contenBox {
		padding: 10px 0px 10px 10px;

		&-item {
			height: 50px;

		}

		&-border {
			border: 1px solid #DADADA;
			border-radius: 5px;
			width: 70vw;
			height: 33px;
			line-height: 33px;
			padding-left: 6px;
		}

		.leftCol {
			width: 90px;
		}

		.start-mark::before {
			content: '*';
			color: red;
			position: absolute;
			//top: 7px;
			left: 6px;
			font-size: 20px;

		}
	}

	.input-row {
		padding: 10px 15px;

	}
	.diable{
		background-color: #9FACA3;
		color: #fff;
	}
	.cuspicker_item{
		width: 237px;
		height: 33px;
		line-height: 33px;
	}
</style>
